<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:replace="layouts/default :: htmlhead" th:with="title='添加用户'"></head>
<body>
    <!-- 使用布局 -->
    <div >
        <div class="container">
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="text-center text-primary" th:if="${user.id == null}">添加用户</h2>
                    <h2 class="text-center text-primary" th:if="${user.id != null}">编辑用户</h2>
                </div>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form th:action="@{/save}" th:object="${user}" method="post" class="needs-validation" novalidate>
                        <input type="hidden" th:field="*{id}">
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="username" th:field="*{username}" required>
                            <div class="invalid-feedback">请输入姓名</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" th:field="*{email}" required>
                            <div class="invalid-feedback">请输入有效的邮箱地址</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="phone" class="form-label">手机号</label>
                            <input type="tel" class="form-control" id="phone" th:field="*{phone}">
                        </div>
                        
                        <div class="mb-3">
                            <label for="avatar" class="form-label">头像URL</label>
                            <input type="text" class="form-control" id="avatar" th:field="*{avatar}">
                        </div>
                        
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> 保存
                            </button>
                            <a href="/users" class="btn btn-secondary ms-2">
                                <i class="fa fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/common/js/common.js}"></script>
    <!-- 表单验证脚本 -->
    <script>
        (function() {
            'use strict';
            const forms = document.querySelectorAll('.needs-validation');
            
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        })();
    </script>
</body>
</html>